import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { Table } from 'antd';
import { getEmployeesByCode } from '../../../services';

import styles from './index.less';

const columns = [
    {
        title: '姓名',
        dataIndex: 'employeeName',
        key: 'employeeName',
        width: 80
    },
    {
        title: '岗位',
        dataIndex: 'dutyAlias',
        key: 'dutyAlias',
        width: 80
    },
    {
        title: '职级',
        dataIndex: 'employeeRank',
        key: 'employeeRank',
        width: 80,
        render: (text, record) => {
            const { rankName, rankValue } = record;
            return <span>{rankName}&nbsp;/&nbsp;{rankValue}</span>
        }
    },
    {
        title: '所属部门',
        dataIndex: 'organizationName',
        key: 'organizationName',
        width: 180
    }
];

const Employees = ({ orgCode }) => {
    const [dataSource, setDataSource] = useState([]);
    const [loading, setLoading] = useState(false)
    useEffect(() => {
        if (orgCode) {
            const getEmployees = async () => {
                setLoading(true)
                const result = await getEmployeesByCode({ organizationCode: orgCode });
                const { code, data = [] } = result;
                if (code === 10000) {
                    setDataSource(data);
                }
                setLoading(false);
            }
            getEmployees();
        }
    }, [orgCode]);
    return (
        <div className={styles.employeeListWrapper}>
            <Table
                rowKey="employeeCode"
                loading={loading}
                className={styles.employeeList}
                columns={columns}
                scroll={{ y: 300 }}
                dataSource={dataSource}
                align="center"
                pagination={false}
            />
        </div>
    )
};

Employees.propTypes = {
    orgCode: PropTypes.string
};

Employees.defaultProps = {
    orgCode: null
};

export default Employees;
